const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

module.exports = {
  stats: "errors-only",
  entry: './src/index.jsx',
  output: {
    filename: 'js/[name].[contenthash:8].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@services': path.resolve(__dirname, './src/services'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },

      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader?localIdentName:[name]--[local]--[hash:base64:5]',
            options: {
              modules: {
                localIdentName: '[name]__[local]_[hash:base64:5]',
              },
            },
          },
          'less-loader',
        ],
        exclude: /(node_modules)/,
      },
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: /(node_modules)/,
      },
      // 处理图片
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      // 图像处理
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1024,
        },
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader',
        options: {
          limit: 10 * 1024,
          noquotes: true,
        },
      },
    ],
  },
  plugins: [
    // 打包进度条显示，可以查看到打包进度百分比
    new SimpleProgressWebpackPlugin({
      format: 'minimal',
    }),
    new CleanWebpackPlugin(), // 打包的时候清除之前的代码
    // css分离并命hash名
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:7].css',
    }),
    new HtmlWebpackPlugin({
      inject: true, // 设为 true 表示把JS文件注入到body结尾，CSS文件注入到head中
      template: './src/public/index.html', // 指定要打包的html路径和文件名
      filename: './index.html', // 指定输出路径和文件名 相对于output.path
      showErrors: true, // webpack 编译出现错误
      minify: {
        // 对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩
        // 对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩
        removeComments: true, // 去除注释
        collapseWhitespace: true, // 是否去除空格
        minimize: true, // 打包为最小值
        removeAttributeQuotes: true, // 去除引号
        minifyCSS: true, // 压缩html内css
        minifyJS: true, // 压缩html内js
      },
    }),
  ],
  optimization: {
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: true,
  },
  optimization: {
    concatenateModules: true,
    splitChunks: {
      minSize:10240,
      maxSize: 819200,
      chunks: 'all', // 表示对同步和异步代码都进行处理   默认值是 async
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\/]node_modules[\/]/,
          priority: 10,
          chunks: 'initial', // 仅打包最初依赖的第三方
        },
        antd: {
          name: 'chunk-antd', // 将antd拆分为单个包
          priority: 20, // 重量需要大于libs和app，否则将打包成libs或app
          test: /[\/]node_modules[\/]_?antd(.*)/, // 为了适应cnpm
        },
        commons: {
          name: 'chunk-commons',
          test: path.resolve('src/components'), // 可以自定义规则
          minChunks: 3, //  最小公共数
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
    runtimeChunk: true,
  },
};
